<template>
  <div class="container">
    <!-- 
      当需要自定义表格表头时需要的参数
      :dataHead="dataHead"  -->
    <el-export
      text="导出"
      fileName="export"
      :dataList="tableData"
      :dataHead="dataHead"
      @exportJsonToExcel="exportJsonToExcel"
    ></el-export>
  </div>
</template>

<script>
import { getFetchData } from '@/api/index' // 导入请求
import elExport from '@/components/el-export/el-export.vue'

export default {
  components: { elExport },
  props: {},
  data() {
    return {
      // 要导出的数据
      tableData: Array.from({ length: 100 }, (_, idx) => {
        return {
          id: idx + 1,
          name: `张三${parseInt(Math.random() * 10, 10)}`,
          age: parseInt(Math.random() * (idx + 1), 10),
        }
      }),
      // 自定义表头
      dataHead: [
        { key: 'id', value: '编号' },
        { key: 'name', value: '姓名' },
        { key: 'age', value: '年龄' },
      ],
      data: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 获取数据的案例
    fetchData() {
      const params = { query: {} } // 请求参数
      getFetchData(params).then((res) => {
        this.data = res.data || []
      })
    },
    exportJsonToExcel(data) {
      if (!data.res) return this.$message.warning(data.msg)
    },
  },
}
</script>

<style lang="less" scoped></style>
